<template>
  <!-- 头部 -->
  <div>
    <div class="nav">
      <div style="margin-left: 20px">
        <ul class="navul">
          <li @click="home"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>Hi,<a>{{profile[0].userName}}</a></li>
          <li @click="exit">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li class="mycb1">
            <a @click="publish" class="myxb">发布商品</a>
            <div class="hen"></div>
          </li>
          <li>
            <a @click="activity">活动页</a>
            <div class="hen"></div>
          </li>
          <li>
            <a @click="Registration">活动报名</a>
            <div class="hen"></div>
          </li>
          <li>
            <a @click="ContactUs">联系客服</a>
            <div class="hen"></div>
          </li>
          <li @click="AuctionPage">拍卖首页</li>
        </ul>
      </div>
    </div>
    <!-- 搜索栏 -->
    <div class="searchBar">
      <div class="searchLogo"><img src="http://112.74.185.144:8000/files/k1R1667179069.jpg" alt="" /></div>
      <div class="Myxianbei">我的闲呗</div>
      <div class="search">
        <div><input type="text" /></div>
        <div><button>搜索</button></div>
      </div>
    </div>
    <!-- 下方内容 -->
    <div class="below">
      <!-- 左边导航栏 -->
      <div class="navigation">
        <el-col :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="switchover"
          >
            <el-submenu index="1">
              <template slot="title">
                <span>我的买入</span>
              </template>
              <el-menu-item index="1-1">已付款</el-menu-item>
              <el-menu-item index="1-2">未付款</el-menu-item>
              <el-menu-item index="1-3">已评价</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <span slot="title">我的卖出</span>
              <el-menu-item index="2-1">已完成</el-menu-item>
              <el-menu-item index="2-2">未完成</el-menu-item>
            </el-submenu>
            <el-menu-item index="3">
              <span slot="title">我的收藏</span>
            </el-menu-item>
            <el-menu-item index="4">
              <span slot="title">我的关注</span>
            </el-menu-item>
            <el-menu-item index="5">
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="6">
              <span slot="title">信息设置</span>
            </el-menu-item>
            <el-menu-item index="7">
              <span slot="title">拍卖预约</span>
            </el-menu-item>
            <el-menu-item index="8">
              <span slot="title">浏览记录</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </div>

      <!-- 右边内容 -->
      <div class="rightContent">
        <!-- 我的买入 -->
        <div v-show="MyBuy">
          <!-- 头部 -->
          <div class="rightTop">
            <div style="width:30%;">宝贝</div>
            <div style="width:10%;">单价</div>
            <div style="width:10%;">数量</div>
            <div style="width:15%;">商品操作</div>
            <div style="width:10%;">实付款</div>
            <div style="width:15%;">交易状态</div>
            <div style="width:10%;">交易操作</div>
          </div>

          <!-- 正常购买订单 -->
          <div style="border: 1px solid rgb(182, 178, 178);margin-top:20px;" v-for="(i) in order" :key="i.addressId"  v-show="i.orderState==state">
            <div class="orderNumber">
              <div style="width:15%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{i.createTime}}</div>
              <div style="width:25%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">订单号：{{i.orderId}}</div>
              <!-- <div style="width:10%;line-height: 50px;">{{i.seller}}</div> -->
              <div style="width:15%;"><van-button style="margin-top: 10px;" type="info" size="small" @click="chat(i.sellerTel)">联系卖家</van-button></div>
              <!-- <div style="width:15%;"><button class="ContactSeller" @click="chat(i.sellerTel)">联系卖家</button></div> -->
              <!-- <div style="width:35%;"><button class="DeleteOrder">删除订单</button></div> -->
            </div>
            <div class="details">
              <div style="width:30%;display:flex;text-align:left">
                <div style="margin-left:30px;">
                  <img :src="i.commodityImg" style="width:50px;height:50px">
                </div>
                <div>
                  <div style="width:250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{i.commodityName}}
                  </div>
                  <div>
                    规格：默认
                  </div>
                </div>
              </div>
              <div style="width:10%;">{{i.originalPrice}}</div>
              <div style="width:10%;">1</div>
              <div style="width:15%;">
                <div v-show="i.orderState==1" @click="LogisticsInfo">查看物流</div>
                  <van-dialog v-model="showLogisticsInfo" title="物流信息" show-cancel-button>
                    <div style="margin-top:10px;height: 40px">
                      物流单号：{{i.expressNumber}}
                    </div>
                  </van-dialog>

                <div @click="ContactUs">申请售后</div>
                <div @click="ComplainSeller(i.commodityId,i.sellerTel)">投诉卖家</div>
              </div>
              <div style="width:10%;">{{i.currentPrice}}</div>
              <div style="width:15%;" v-if="i.orderState==0">未付款</div>
              <div style="width:15%;" v-if="i.orderState==1">已付款</div>
              <div style="width:15%;" v-if="i.orderState==2">已评价</div>
              <div style="width:10%;" v-if="i.orderState==2">已评价</div>
              <div style="width:10%;" v-if="i.orderState==1"><button @click="appraise">评价</button></div>
              <van-dialog v-model="showAppraise" title="评价" show-cancel-button @confirm="confirmAppraise(i)">
                <div style="margin-top:10px;height: 40px">
                  请输入评价
                  <input type="text" v-model="content" placeholder="请输入对卖家的评价">
                </div>
                
                <div>请选择对卖家的评分：
                  <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
                </div>
                <div>
                  <van-uploader :after-read="commentImg">
                    <button button style="margin-top:10px;">上传图片</button>
                  </van-uploader>
                </div>
                <div style="width:100px;margin:10px auto">
                  <van-checkbox v-model="checked" checked-color="#ee0a24">是否匿名</van-checkbox>
                </div>
              </van-dialog>

              <div style="width:10%;" v-if="i.orderState==0"><button @click="payment(i.orderId,1)">去付款</button></div>
            </div>
          </div>
          <!-- 拍卖购买订单 -->
          <div style="border: 1px solid rgb(182, 178, 178);margin-top:20px;" v-for="(j) in auctionOrder" :key="j.activityId"  v-show="j.orderState==state">
            <div class="orderNumber">
              <div style="width:15%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{j.time}}</div>
              <div style="width:25%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">订单号：{{j.auctionKnockdownId}}</div>
              <!-- <div style="width:10%;line-height: 50px;">{{i.seller}}</div> -->
              <div style="width:15%;"><van-button style="margin-top: 10px;" type="info" size="small" @click="chat(j.sellerTel)">联系卖家</van-button></div>
              <!-- <div style="width:15%;"><button class="ContactSeller" @click="chat(j.sellerTel)">联系卖家</button></div> -->
              <!-- <div style="width:35%;"><button class="DeleteOrder">删除订单</button></div> -->
            </div>
            <div class="details">
              <div style="width:30%;display:flex;text-align:left">
                <div style="margin-left:30px;">
                  <img :src="j.commodityImg" style="width:50px;height:50px">
                </div>
                <div>
                  <div style="width:250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{j.commodityName}}
                  </div>
                  <div>
                    规格：默认
                  </div>
                </div>
              </div>
              <div style="width:10%;">{{j.originalPrice}}</div>
              <div style="width:10%;">1</div>
              <div style="width:15%;">
                <div v-show="j.orderState==1" @click="selectLogisticsInfo">查看物流</div>
                <van-dialog v-model="auctionLogisticsInfo" title="物流信息" show-cancel-button>
                  <div style="margin-top:10px;height: 40px">
                    物流单号：{{j.expressNumber}}
                  </div>
                </van-dialog>

                <div @click="ContactUs">申请售后</div>
                <div @click="ComplainSeller(j.commodityId,j.sellerTel)">投诉卖家</div>
              </div>
              <div style="width:10%;">{{j.currentPrice}}</div>
              <div style="width:15%;" v-if="j.orderState==0">未付款</div>
              <div style="width:15%;" v-if="j.orderState==1">已付款</div>
              <div style="width:15%;" v-if="j.orderState==2">已评价</div>
              <div style="width:10%;" v-if="j.orderState==2">已评价</div>
              <div style="width:10%;" v-if="j.orderState==1"><button @click="auctionAppraise">评价</button></div>

              <van-dialog v-model="showAuctionAppraise" title="评价" show-cancel-button @confirm="confirmAuctionAppraise(j)">
                <div style="margin-top:10px;height: 40px">
                  请输入评价
                  <input type="text" v-model="auctionContent" placeholder="请输入对卖家的评价">
                </div>
                
                <div>请选择对卖家的评分：
                  <van-rate v-model="grade" allow-half void-icon="star" void-color="#eee" />
                </div>
                <div>
                  <van-uploader :after-read="auctionImg">
                    <button button style="margin-top:10px;">上传图片</button>
                  </van-uploader>
                </div>
                <div style="width:100px;margin:10px auto">
                  <van-checkbox v-model="isNoCryptonym" checked-color="#ee0a24">是否匿名</van-checkbox>
                </div>
              </van-dialog>

              <div style="width:10%;" v-if="j.orderState==0"><button @click="payment(j.auctionKnockdownId,2)">去付款</button></div>
            </div>
          </div>
        </div>

        <!-- 我的卖出 -->
        <div v-show="MySale">
          <!-- 头部 -->
          <div class="rightTop">
            <div style="width:30%;">宝贝</div>
            <div style="width:10%;">单价</div>
            <div style="width:10%;">数量</div>
            <div style="width:15%;">操作</div>
            <div style="width:10%;">实付款</div>
            <div style="width:15%;">交易状态</div>
            <div style="width:10%;">交易操作</div>
          </div>
          <!-- 正常已卖订单 -->
          <div style="border: 1px solid rgb(182, 178, 178);margin-top:20px;" v-for="(i) in SaleOrder" :key="i.addressId" v-show="i.orderState==sellerState">
            <div class="orderNumber">
              <div style="width:15%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{i.createTime}}</div>
              <div style="width:25%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">订单号：{{i.orderId}}</div>
              <!-- <div style="width:10%;line-height: 50px;">{{i.seller}}</div> -->
              <div style="width:15%;"><van-button style="margin-top: 10px;" type="info" size="small" @click="chat(i.buyerTel)">联系卖家</van-button></div>
              <!-- <div style="width:15%;"><button class="ContactSeller" @click="chat(i.buyerTel)">联系买家</button></div> -->
              <!-- <div style="width:35%;"><button class="DeleteOrder">删除订单</button>`</div> -->
            </div>
            <div class="details">
              <div style="width:30%;display:flex;text-align:left">
                <div style="margin-left:30px;">
                  <img :src="i.commodityImg" style="width:50px;height:50px">
                </div>
                <div>
                  <div style="width:250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{i.commodityName}}
                  </div>
                  <div>
                    规格：默认
                  </div>
                </div>
              </div>
              <div style="width:10%;">{{i.originalPrice}}</div>
              <div style="width:10%;">1</div>
              <div style="width:15%;">
                <div @click="UploadLogistics">上传物流</div>
                <van-dialog v-model="showLogistics" title="上传物流" show-cancel-button @confirm="confirmUploadLogistics(i)">
                  <div style="margin-top:10px;height: 40px">
                    物流单号：
                    <input type="text" v-model="trackingNumber" placeholder="请输入物流单号">
                  </div>
                </van-dialog>

                <div @click="ComplainSeller(i.commodityId,i.buyerTel)">举报买家</div>
              </div>
              <div style="width:10%;">{{i.orderPrice}}</div>
              <div style="width:15%;" v-if="i.orderState==0">未付款</div>
              <div style="width:15%;" v-if="i.orderState==1">已付款</div>
              <div style="width:10%;" v-if="i.orderState==1"></div>
              <div style="width:10%;" v-else><button>通知付款</button></div>
            </div>
          </div>
          <!-- 拍卖已卖订单 -->
          <div style="border: 1px solid rgb(182, 178, 178);margin-top:20px;" v-for="(i) in auctionSoldOrder" :key="i.activityId" v-show="i.orderState==sellerState">
            <div class="orderNumber">
              <div style="width:15%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{i.time}}</div>
              <div style="width:25%;line-height: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">订单号：{{i.auctionKnockdownId}}</div>
              <!-- <div style="width:10%;line-height: 50px;">{{i.seller}}</div> -->
              <div style="width:15%;"><van-button style="margin-top: 10px;" type="info" size="small" @click="chat(i.buyerTel)">联系卖家</van-button></div>
              <!-- <div style="width:15%;"><button class="ContactSeller" @click="chat(i.buyerTel)">联系买家</button></div> -->
              <!-- <div style="width:35%;"><button class="DeleteOrder">删除订单</button></div> -->
            </div>
            <div class="details">
              <div style="width:30%;display:flex;text-align:left">
                <div style="margin-left:30px;">
                  <img :src="i.commodityImg" style="width:50px;height:50px">
                </div>
                <div>
                  <div style="width:250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{i.commodityName}}
                  </div>
                  <div>
                    规格：默认
                  </div>
                </div>
              </div>
              <div style="width:10%;">{{i.originalPrice}}</div>
              <div style="width:10%;">1</div>
              <div style="width:15%;">
                <div @click="UploadAuctionLogistics">上传物流</div>
                <van-dialog v-model="showAuctionLogistics" title="上传物流" show-cancel-button @confirm="DetermineTheUpload(i)">
                  <div style="margin-top:10px;height: 40px">
                    物流单号：
                    <input type="text" v-model="auctionTrackingNumber" placeholder="请输入物流单号">
                  </div>
                </van-dialog>

                <div @click="ComplainSeller(i.commodityId,i.buyerTel)">举报买家</div>
              </div>
              <div style="width:10%;">{{i.currentPrice}}</div>
              <div style="width:15%;" v-if="i.orderState==0">未付款</div>
              <div style="width:15%;" v-if="i.orderState==1">已付款</div>
              <div style="width:10%;" v-if="i.orderState==1"></div>
              <div style="width:10%;" v-else><button>通知付款</button></div>
            </div>
          </div>
        </div>
        

        <!-- 我的收藏 -->
        <div v-show="MyCollect" style="display:flex;flex-wrap: wrap">
          <div v-for="(i,index) in collect" :key="index" style="margin-left:35px;position: relative;margin-top:20px;">
            <img @click="goods(i.commodityId,i.userTel)" :src="i.commodityImg" class="Collectimg">
            <div class="CollectName">{{i.commodityName}}</div>
            <span class="CollectMoney">￥{{i.currentPrice}}</span>
            <span class="CollectPrice">￥{{i.originalPrice}}</span>
            <p class="cancel" @click="cancelCollect(i.collectionId)">取消收藏</p>
          </div>
        </div>

        <!-- 我的关注 -->
        <div v-show="MyAttention">
          <div v-for="(i,index) in Attention" :key="index" style="width:70%;display:flex;margin-left:5%;border: 1px solid rgb(178, 199, 236);margin-top:20px;">
            <div style="width:20%;margin-left:20px;"><el-avatar :src="i.userPhoto" :size=100></el-avatar></div> 
            <div style="width:25%;margin-top:20px;">
              <h2>{{i.userName}}</h2>
              <div>信用分：<span style="color:red">{{i.creditScore}}</span></div>
            </div>
            <div style="width:25%;">
              <div><van-button style="margin-top: 10px;" type="info" size="small" @click="chat(i.userTel)">联系用户</van-button></div>
              <!-- <div><button class="ContactSeller" @click="chat(i.userTel)">联系他</button></div> -->
              <div><van-button style="margin-top: 10px;background-color: rgb(198, 212, 235);border: 1px solid rgb(151, 151, 245);" size="small" @click="unfollow(i.attentionId)">取消关注</van-button></div>
              <!-- <div><button class="ContactSeller" @click="unfollow(i.attentionId)">取消关注</button></div> -->
            </div>
            <div style="width:20%;margin-top:40px;color:#fca484" @click="selectOthersData(i.userTel)">
              查看更多>>
            </div>
          </div>
        </div>

        <!-- 个人信息 -->
        <div v-show="PersonalData">
          <el-tabs type="border-card" >
            <el-tab-pane label="我的商品">
              <div style="display:flex;flex-wrap: wrap">
                <div v-for="(i,index) in MyGoods"  :key="index" v-show="i.state==myGoodsState" style="margin-left:20px;position: relative;margin-top:20px;">
                  <img @click="goods(i.commodityId,i.userTel)" :src="i.commodityImg" class="Collectimg">
                  <div class="CollectName">{{i.commodityName}}</div>
                  <span class="CollectMoney">￥{{i.currentPrice}}</span>
                  <span class="CollectPrice">￥{{i.originalPrice}}</span>
                  <p class="cancel" @click="unShelve(i.commodityId)">下架商品</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的评价">
              <div v-for="(i,index) in MyEvaluate" :key="index">
                <div style="margin-top:20px;margin-left:20px;">
                  <div style="display:flex;">
                    <div><el-avatar :src="i.photo" :size=45></el-avatar></div>
                    <div style="margin-left:10px;">
                      <h3 v-show="i.anonymous==0">{{i.userName}}</h3>
                      <h3 v-show="i.anonymous==1">*******</h3>
                      <div style="color:#b8b5b5;">{{i.time}}</div>
                    </div>
                  </div>
                  <div style="margin-top:10px;">{{i.commentsToSeller}}</div>
                  <div><img :src="i.commentImg" style="margin-top:20px;"></div>
                </div>
                <el-divider></el-divider>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的资料" >
              <div class="information">
                <div>
                  <el-avatar :src="profile[0].userPhoto" :size=100></el-avatar>
                </div>
                <div style="margin-left:30px;margin-top:20px;">
                  <h3>昵称：{{profile[0].userName}}</h3>
                  <div>手机号：{{profile[0].userTel}}</div>
                  <div style="color:#b8b5b5;white-space: nowrap;">注册日期：{{profile[0].registrationTime}}</div>
                </div>
              </div>
              <div class="attention">
                <div>关注（<span style="color:red;">{{attentionNumber}}</span>）</div>
                <div style="margin-left:100px;">粉丝（<span style="color:red;">{{fansNumber}}</span>）</div>
              </div>
              <div>
                <h2 style="width:160px;margin: 20px auto;">我的收货地址</h2>
                <div style="display:flex;background-color: rgb(228, 228, 228);width:830px;margin: 0 auto;height: 35px;">
                  <div class="address" style="width: 100px;">收货人</div>
                  <div class="address" style="width: 180px;">所在地区</div>
                  <div class="address" style="width: 300px;">详细地址</div>
                  <div class="address" style="width: 100px;">邮编</div>
                  <div class="address" style="width: 150px;">电话/手机</div>
                </div>
              </div>
              <div v-for="(i,index) in MyAddress" :key="index" style="display:flex;width:830px;margin: 0 auto;">
                  <div style="width: 100px;border: 1px solid rgb(178, 199, 236);">{{i.consignee}}</div>
                  <div style="width: 180px;border: 1px solid rgb(178, 199, 236);">{{i.region}}</div>
                  <div style="width: 300px;border: 1px solid rgb(178, 199, 236);overflow: hidden;white-space: nowrap;text-overflow: ellipsis; ">{{i.address}}</div>
                  <div style="width: 100px;border: 1px solid rgb(178, 199, 236);">{{i.postcode}}</div>
                  <div style="width: 150px;border: 1px solid rgb(178, 199, 236);">{{i.phone}}</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 信息设置 -->
        <div v-show="Changeinfo">
          <div class="information">
            <div>
              <el-avatar :src="profile[0].userPhoto" :size=100></el-avatar>
              <van-uploader :after-read="afterRead">
                <button style="margin-left:15px;">更换头像</button>
              </van-uploader>
            </div>
            <div style="margin-left:30px;">
              <div style="display:flex;width:600px;">
                <h3>昵称：{{profile[0].userName}}</h3>
                <div style="margin-left:30px;color:rgb(118, 166, 238);line-height: 30px;" @click="ChangeName">修改昵称</div>
                  
                <van-dialog v-model="showName" title="修改昵称" show-cancel-button @confirm="confirmName">
                  <input style="margin-left:60px;" v-model="userName" placeholder="请输入昵称">
                </van-dialog>
              </div>
              <div>手机号：{{profile[0].userTel}}</div>
              <div style="color:#b8b5b5;white-space: nowrap;">注册日期：{{profile[0].registrationTime}}</div>
              <div style="color:rgb(118, 166, 238);width:100px;" @click="ChangeLogPwd">修改登录密码</div>
              <van-dialog v-model="showLogPwd" title="修改登录密码" show-cancel-button @confirm="confirmLogPwd">
                <input style="margin-left:60px;" type="password" v-model="userPwd" placeholder="请输入原密码">
                <input style="margin-left:60px;margin-top:10px;" type="password" v-model="userNewPwd" placeholder="请输入新密码">
                <input style="margin-left:60px;margin-top:10px;" type="password" v-model="userPwdTwo" placeholder="请再次输入新密码">
              </van-dialog>

              <div style="color:rgb(118, 166, 238);width:100px;" @click="ChangePayPwd">修改支付密码</div>
              <van-dialog v-model="showPayPwd" title="修改支付密码" show-cancel-button @confirm="confirmPayPwd">
                <input style="margin-left:60px;" type="password" v-model="userPayPwd" placeholder="请输入原支付密码">
                <input style="margin-left:60px;margin-top:10px;" type="password" v-model="newPayPwd" placeholder="请输入新支付密码">
                <input style="margin-left:60px;margin-top:10px;" type="password" v-model="twoPayPwd" placeholder="请再次输入新支付密码">
              </van-dialog>

              <div style="color:rgb(118, 166, 238);width:100px;" @click="Certification" v-if="isNoCertification==0">实名认证</div>
              <div style="color:#b8b5b5;width:100px;" v-if="isNoCertification==1">已实名</div>
              <van-dialog v-model="showCertification" title="实名认证" show-cancel-button @confirm="confirmCertification">
                <input style="margin-left:60px;" type="text" v-model="IDcardNo" placeholder="请输入身份证号">
                <input style="margin-left:60px;margin-top:10px;" type="text" v-model="IDcardName" placeholder="请输入名字">
                <div>
                  <van-uploader :after-read="frontPhoto">
                    <button button style="margin-left:95px;margin-top:10px;">上传身份证正面照</button>
                  </van-uploader>
                </div>
                <div>
                  <van-uploader :after-read="versoPhoto">
                    <button button style="margin-left:95px;margin-top:10px;">上传身份证反面照</button>
                  </van-uploader>
                </div>
              </van-dialog>
            </div>
          </div>
          <div class="attention">
            <div>关注（<span style="color:red;">1</span>）</div>
            <div style="margin-left:100px;">粉丝（<span style="color:red;">3</span>）</div>
          </div>
          <div>
            <h2 style="width:160px;margin: 0 auto;margin-top:50px;">我的收货地址</h2>
            <div style="width:80px;margin: 0 auto;color:rgb(118, 166, 238);" @click="address">新增地址</div>

            <!-- 新增地址 -->
            <van-popup v-model="showAddress"  >
              <van-address-edit
              :area-list="areaList"
              show-set-default
              show-search-result
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
              @save="onSave"
              />
            </van-popup>

            <!-- 渲染地址 -->
            <!-- <div class="add"> -->
              <van-address-list
              class="add"
              v-model="chosenAddressId"
              :list="list"
              default-tag-text="默认"
              @edit="onEdit"
              />
            <!-- </div> -->
            
            <!-- 编辑地址 -->
            <van-popup v-model="amendAddress"  >
              <van-address-edit
              :area-list="areaList"
              show-delete
              show-set-default
              show-search-result
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
              @save="updateadd"
              @delete="onDelete"
              :address-info="{
                  name:echo.name,
                  tel:echo.tel,
                  areaCode:echo.areaCode,
                  addressDetail:echo.street
                  }"
              />
            </van-popup>
            
            <!-- <div style="display:flex;background-color: rgb(228, 228, 228);width:900px;margin: 0 auto;height: 35px;">
              <div class="address" style="width: 100px;">收货人</div>
              <div class="address" style="width: 150px;">所在地区</div>
              <div class="address" style="width: 200px;">详细地址</div>
              <div class="address" style="width: 100px;">邮编</div>
              <div class="address" style="width: 150px;">电话/手机</div>
              <div class="address" style="width: 100px;">操作</div>
              <div class="address" style="width: 100px;">默认</div>
            </div> -->
          </div>
          <!-- <div v-for="(i,index) in MyAddress" :key="index" style="display:flex;width:900px;margin: 0 auto;">
              <div style="width: 100px;border: 1px solid rgb(178, 199, 236);">{{i.consignee}}</div>
              <div style="width: 150px;border: 1px solid rgb(178, 199, 236);">{{i.region}}</div>
              <div style="width: 200px;border: 1px solid rgb(178, 199, 236);">{{i.address}}</div>
              <div style="width: 100px;border: 1px solid rgb(178, 199, 236);">{{i.postcode}}</div>
              <div style="width: 150px;border: 1px solid rgb(178, 199, 236);">{{i.phone}}</div>

              <div style="display:flex;width: 100px;border: 1px solid rgb(178, 199, 236);">
                <div style="width: 40px;margin-left:10px;">修改</div>
                <div style="width: 2px;">|</div>
                <div style="width: 40px;text-align:right;">删除</div>
              </div>

              <div style="width: 100px;border: 1px solid rgb(178, 199, 236);">设为默认</div>
          </div> -->
        </div>

        <!-- 拍卖预约 -->
        <div v-show="appointment" style="display:flex;flex-wrap: wrap">
          <div v-for="(i,index) in auction" :key="index" style="margin-left:35px;position: relative;margin-top:20px;">
            <img :src="i.commodityImg" class="Collectimg">
            <div class="CollectName">{{i.commodityName}}</div>
            <div class="CollectMoney">起拍价：￥{{i.originalPrice}}</div>
            <p class="cancel" style="bottom: 45px;" @click="cancelBooking(i.auctionId)">取消预约</p>
          </div>
        </div>

        <!-- 浏览记录 -->
        <div v-show="record" style="display:flex;flex-wrap: wrap">
          <div v-for="(i,index) in cookies" :key="index" style="margin-left:35px;position: relative;margin-top:20px;">
            <img @click="goods(i.commodityId,i.userTel)" :src="i.commodityImg" class="Collectimg">
            <div class="CollectName">{{i.commodityName}}</div>
            <span class="CollectMoney">￥{{i.currentPrice}}</span>
            <span class="CollectPrice">￥{{i.originalPrice}}</span>
            <p class="cancel" @click="delBrowseHistory(i.browseId)">删除记录</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  data() {
    return {
      userTel:sessionStorage.getItem('userTel'),
      order:[//买入订单
        // {time:"2022-10-03",OrderNumber:123456789,seller:"张三",univalence:199,actuallyPaid:99,state:"已付款",src:"https://gw.alicdn.com/imgextra/i3/1744401399/O1CN01BsVUZJ1MCmsbRei9x_!!1744401399.jpg_Q75.jpg_.webp",name:"电磁炉",but:"评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"李四",univalence:188,actuallyPaid:88,state:"未付款",src:"https://gd3.alicdn.com/imgextra/i4/2212470167183/O1CN01aKNAVx22vrdnC9AVJ_!!2212470167183.jpg",name:"牛奶",but:"去付款",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"王五",univalence:166,actuallyPaid:66,state:"已评价",src:"https://gw.alicdn.com/imgextra/i1/2200619738561/O1CN01iIZjnx2D6zUCfHqdP_!!2200619738561.jpg_Q75.jpg_.webp",name:"口罩",but:"已评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"张三",univalence:199,actuallyPaid:99,state:"已付款",src:"https://gw.alicdn.com/imgextra/i3/1744401399/O1CN01BsVUZJ1MCmsbRei9x_!!1744401399.jpg_Q75.jpg_.webp",name:"电磁炉",but:"评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"李四",univalence:188,actuallyPaid:88,state:"未付款",src:"https://gd3.alicdn.com/imgextra/i4/2212470167183/O1CN01aKNAVx22vrdnC9AVJ_!!2212470167183.jpg",name:"牛奶",but:"去付款",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"王五",univalence:166,actuallyPaid:66,state:"已评价",src:"https://gw.alicdn.com/imgextra/i1/2200619738561/O1CN01iIZjnx2D6zUCfHqdP_!!2200619738561.jpg_Q75.jpg_.webp",name:"口罩",but:"已评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"张三",univalence:199,actuallyPaid:99,state:"已付款",src:"https://gw.alicdn.com/imgextra/i3/1744401399/O1CN01BsVUZJ1MCmsbRei9x_!!1744401399.jpg_Q75.jpg_.webp",name:"电磁炉",but:"评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"李四",univalence:188,actuallyPaid:88,state:"未付款",src:"https://gd3.alicdn.com/imgextra/i4/2212470167183/O1CN01aKNAVx22vrdnC9AVJ_!!2212470167183.jpg",name:"牛奶",but:"去付款",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"王五",univalence:166,actuallyPaid:66,state:"已评价",src:"https://gw.alicdn.com/imgextra/i1/2200619738561/O1CN01iIZjnx2D6zUCfHqdP_!!2200619738561.jpg_Q75.jpg_.webp",name:"口罩",but:"已评价",specification:"默认",amount:1}
      ],
      SaleOrder:[//卖出订单
        // {time:"2022-10-03",OrderNumber:123456789,seller:"张三",univalence:199,actuallyPaid:99,state:"已完成",src:"https://gd2.alicdn.com/imgextra/i2/2211620480791/O1CN01Mk1IA91HiJxxyYXeo_!!2211620480791.png_400x400.jpg",name:"排查",but:"评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"李四",univalence:188,actuallyPaid:88,state:"未完成",src:"https://img.alicdn.com/imgextra/i1/3937219703/O1CN01lJ9y4N2LY1krVGPdZ_!!3937219703-0-C2M.jpg_430x430q90.jpg",name:"魔刀神器",but:"通知付款",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"张三",univalence:199,actuallyPaid:99,state:"已完成",src:"https://gd2.alicdn.com/imgextra/i2/2211620480791/O1CN01Mk1IA91HiJxxyYXeo_!!2211620480791.png_400x400.jpg",name:"排查",but:"评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"李四",univalence:188,actuallyPaid:88,state:"未完成",src:"https://img.alicdn.com/imgextra/i1/3937219703/O1CN01lJ9y4N2LY1krVGPdZ_!!3937219703-0-C2M.jpg_430x430q90.jpg",name:"魔刀神器",but:"通知付款",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"张三",univalence:199,actuallyPaid:99,state:"已完成",src:"https://gd2.alicdn.com/imgextra/i2/2211620480791/O1CN01Mk1IA91HiJxxyYXeo_!!2211620480791.png_400x400.jpg",name:"排查",but:"评价",specification:"默认",amount:1},
        // {time:"2022-10-03",OrderNumber:123456789,seller:"李四",univalence:188,actuallyPaid:88,state:"未完成",src:"https://img.alicdn.com/imgextra/i1/3937219703/O1CN01lJ9y4N2LY1krVGPdZ_!!3937219703-0-C2M.jpg_430x430q90.jpg",name:"魔刀神器",but:"通知付款",specification:"默认",amount:1},
      ],
      collect:[//收藏
        
        ],
      Attention:[//关注
        // {src:"https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"堆糖",credit:5,acc:13255089556},
        // {src:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"小猫咪",credit:4,acc:18250356032},
        // {src:"https://img0.baidu.com/it/u=242752498,3264950281&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"蜡笔小新",credit:3,acc:15659875005}
      ],
      MyGoods:[//我的商品
        // {src:"https://gw.alicdn.com/bao/uploaded/i4/2211829981376/O1CN01UmefyB1M2FkW0hdK5_!!2211829981376.jpg_Q75.jpg_.webp",name:"投影仪家用T6手机投屏同屏投影机家庭影院超高清",univalence:1888,actuallyPaid:1388},
        // {src:"https://gw.alicdn.com/imgextra/i1/3937219703/O1CN018tKQov2LY1lxgcMTk_!!3937219703-0-C2M.jpg_Q75.jpg_.webp",name:"志高电饭煲家用迷你多功能1小型2L老式3升4个人5蒸煮两用智能饭锅",univalence:188,actuallyPaid:138},
        // {src:"https://gw.alicdn.com/imgextra/i2/2076877750/O1CN01ykX9pq277YAZbhPoI_!!2076877750-0-lubanu-s.jpg_Q75.jpg_.webp",name:"春秋款秋款运动长裤子男士休闲裤男青年舒适宽松直筒修身韩版潮流",univalence:88,actuallyPaid:68},
        // {src:"https://gw.alicdn.com/imgextra/i2/2068455645/O1CN01GpyppE1rZSOZTUvu4_!!2068455645.jpg_Q75.jpg_.webp",name:"正品李宁翻毛篮球牛皮手感软皮耐磨室外小学生5号儿童成人7号蓝球",univalence:168,actuallyPaid:158},
        // {src:"https://img.alicdn.com/imgextra/i1/11678303/O1CN010k6o772BCp71adQGy_!!11678303.jpg",name:"二手电脑台式主机 32寸I7高端DIY游戏水冷GTA5组装机网吧吃鸡全套",univalence:2000,actuallyPaid:1800},
        // {src:"https://gw.alicdn.com/imgextra/i4/1031643790/O1CN019l27FP1drraUZ4Vqm_!!1031643790.jpg_Q75.jpg_.webp",name:"免费刻字s999纯银情侣戒指女男足银对戒时尚个性小众设计一对礼物",univalence:150,actuallyPaid:118},
      ],
      MyEvaluate:[//我的评价
        // {name:"张三",photo:"https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",details:"挺不错的一个卖家，挺好说话的，期待下次继续合作",src:"https://img.alicdn.com/imgextra/i1/11678303/O1CN010k6o772BCp71adQGy_!!11678303.jpg",time:"2021-1-12"},
        // {name:"李四",photo:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",details:"什么人啊，用一天就破了，说退货也不行",src:"https://gw.alicdn.com/imgextra/i1/3937219703/O1CN018tKQov2LY1lxgcMTk_!!3937219703-0-C2M.jpg_Q75.jpg_.webp",time:"2021-8-23"},
        // {name:"王五",photo:"https://img0.baidu.com/it/u=242752498,3264950281&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",details:"东西一般般，人品不错",src:"https://gw.alicdn.com/bao/uploaded/i4/2211829981376/O1CN01UmefyB1M2FkW0hdK5_!!2211829981376.jpg_Q75.jpg_.webp",time:"2022-3-30"}
      ],
      MyAddress:[//我的地址
        // {consignee:"张三",region:"福建省 厦门市 思明区 万达街道",address:"软件园25-2号5楼",postcode:360000,phone:1323456789},
        // {consignee:"李四",region:"福建省 厦门市 集美区 软件园街道",address:"软件园33-1号3楼",postcode:360000,phone:1323456789},
        // {consignee:"王五",region:"福建省 厦门市 湖里区 观音山街道",address:"会展中心44-3号4楼",postcode:360000,phone:1323456789},
      ],
      auction:[//拍卖预约
        // {src:"https://gw.alicdn.com/bao/uploaded/i4/2211829981376/O1CN01UmefyB1M2FkW0hdK5_!!2211829981376.jpg_Q75.jpg_.webp",name:"投影仪家用T6手机投屏同屏投影机家庭影院超高清",StarPrice:1888},
        // {src:"https://gw.alicdn.com/imgextra/i1/3937219703/O1CN018tKQov2LY1lxgcMTk_!!3937219703-0-C2M.jpg_Q75.jpg_.webp",name:"志高电饭煲家用迷你多功能1小型2L老式3升4个人5蒸煮两用智能饭锅",StarPrice:188},
        // {src:"https://gw.alicdn.com/imgextra/i2/2076877750/O1CN01ykX9pq277YAZbhPoI_!!2076877750-0-lubanu-s.jpg_Q75.jpg_.webp",name:"春秋款秋款运动长裤子男士休闲裤男青年舒适宽松直筒修身韩版潮流",StarPrice:88},
        // {src:"https://gw.alicdn.com/imgextra/i2/2068455645/O1CN01GpyppE1rZSOZTUvu4_!!2068455645.jpg_Q75.jpg_.webp",name:"正品李宁翻毛篮球牛皮手感软皮耐磨室外小学生5号儿童成人7号蓝球",StarPrice:168},
        // {src:"https://img.alicdn.com/imgextra/i1/11678303/O1CN010k6o772BCp71adQGy_!!11678303.jpg",name:"二手电脑台式主机 32寸I7高端DIY游戏水冷GTA5组装机网吧吃鸡全套",StarPrice:2000},
        // {src:"https://gw.alicdn.com/imgextra/i4/1031643790/O1CN019l27FP1drraUZ4Vqm_!!1031643790.jpg_Q75.jpg_.webp",name:"免费刻字s999纯银情侣戒指女男足银对戒时尚个性小众设计一对礼物",StarPrice:150},
      ],
      cookies:[//浏览记录
        // {src:"https://gw.alicdn.com/bao/uploaded/i4/2211829981376/O1CN01UmefyB1M2FkW0hdK5_!!2211829981376.jpg_Q75.jpg_.webp",name:"投影仪家用T6手机投屏同屏投影机家庭影院超高清",univalence:1888,actuallyPaid:1388},
        // {src:"https://gw.alicdn.com/imgextra/i1/3937219703/O1CN018tKQov2LY1lxgcMTk_!!3937219703-0-C2M.jpg_Q75.jpg_.webp",name:"志高电饭煲家用迷你多功能1小型2L老式3升4个人5蒸煮两用智能饭锅",univalence:188,actuallyPaid:138},
        // {src:"https://gw.alicdn.com/imgextra/i2/2076877750/O1CN01ykX9pq277YAZbhPoI_!!2076877750-0-lubanu-s.jpg_Q75.jpg_.webp",name:"春秋款秋款运动长裤子男士休闲裤男青年舒适宽松直筒修身韩版潮流",univalence:88,actuallyPaid:68},
        // {src:"https://gw.alicdn.com/imgextra/i2/2068455645/O1CN01GpyppE1rZSOZTUvu4_!!2068455645.jpg_Q75.jpg_.webp",name:"正品李宁翻毛篮球牛皮手感软皮耐磨室外小学生5号儿童成人7号蓝球",univalence:168,actuallyPaid:158},
        // {src:"https://img.alicdn.com/imgextra/i1/11678303/O1CN010k6o772BCp71adQGy_!!11678303.jpg",name:"二手电脑台式主机 32寸I7高端DIY游戏水冷GTA5组装机网吧吃鸡全套",univalence:2000,actuallyPaid:1800},
        // {src:"https://gw.alicdn.com/imgextra/i4/1031643790/O1CN019l27FP1drraUZ4Vqm_!!1031643790.jpg_Q75.jpg_.webp",name:"免费刻字s999纯银情侣戒指女男足银对戒时尚个性小众设计一对礼物",univalence:150,actuallyPaid:118},
      ],
      profile:[//个人信息
      {userPhoto:""}],
      state:0,   //买入状态
      sellerState:0,  //卖出状态
      MyBuy:true,  //我的买入
      MySale:false,  //我的卖出
      MyCollect:false,  //我的收藏
      MyAttention:false,  //我的关注
      PersonalData:false,  //个人信息
      Changeinfo:false,  //修改信息
      appointment:false,  //拍卖预约
      record:false,  //浏览记录

      showName:false,
      userName:"",
      showLogPwd:false,
      userPwd:"",
      userNewPwd:"",
      userPwdTwo:"",
      showPayPwd:false,
      userPayPwd:"",
      IDcardName:"",
      newPayPwd:"",
      twoPayPwd:"",
      showAddress:false,
      showCertification:false,
      IDcardNo:"",

      areaList,
      chosenAddressId: '1',
      updateaddId:"",
      list:[
        // {id:1,name:"abc",
        // tel:13500000000,address:"中国福建省厦门市思明区软件园二期25-2",country:'中国',province:"15651",city:"65565",
        // county:"265156",street:"思明区软件园二期25-2",areaCode:"120101"},
        // {id:2,name:"abc",
        // tel:13500000000,address:"中国福建省厦门市思明区软件园二期25-2",country:'中国',province:"15651",city:"65565",
        // county:"265156",street:"思明区软件园二期25-2",areaCode:"120101"}
        ],
      amendAddress:false,
      echo:[],
      auctionOrder:[],//拍卖购买订单
      auctionSoldOrder:[],//拍卖卖出订单
      myGoodsState:'0',
      attentionNumber:0,//关注数量
      fansNumber:0,//粉丝数量
      isNoCertification:0,//是否实名，0代表未实名，1代表已实名
      showAppraise:false,
      value:0,//正常订单评分
      checked:true,//正常订单是否匿名
      content:"",//正常订单评论内容
      frontImg:"",//身份证正面照片
      versoImg:"",//身份证反面照片
      commentPhoto:"",//正常订单评论图片
      cryptonym:0,//正常订单匿名状态  0代表匿名  1代表不匿名
      showAuctionAppraise:false,
      isNoCryptonym:true,//拍卖订单是否匿名
      CryptonymNumber:0,//拍卖订单匿名状态  0代表匿名  1代表不匿名
      auctionPhoto:"",//拍卖订单评论图片
      auctionContent:"",//拍卖订单评论内容
      grade:0,//拍卖订单评分
      showLogistics:false,
      trackingNumber:"",//正常订单物流单号
      showAuctionLogistics:false,
      auctionTrackingNumber:"",//拍卖订单物流单号
      showLogisticsInfo:false,
      auctionLogisticsInfo:false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key);
      if(keyPath[0]=="1"){
        this.MyBuy=true
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
      }
      else if(keyPath[0]=="2"){
        this.MyBuy=false
        this.MySale=true
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
      }
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    switchover(key,keyPath) {
      console.log(key,keyPath)
      if(keyPath[1]=="1-1"){
        this.MyBuy=true
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
        this.state=1
      }
      else if(keyPath[1]=="1-2"){
        this.MyBuy=true
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
        this.state=0
      }
      else if(keyPath[1]=="1-3"){
        this.MyBuy=true
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
        this.state=2
      }
      else if(keyPath[1]=="2-1"){
        this.MySale=true
        this.MyBuy=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
        this.sellerState=1
      }
      else if(keyPath[1]=="2-2"){
        this.MySale=true
        this.MyBuy=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
        this.sellerState=0
      }
      else if(key==3){
        this.MyBuy=false
        this.MySale=false
        this.MyCollect=true
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
      }
      else if(key==4){
        this.MyBuy=false
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=true
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=false
      }
      else if(key==5){
        this.MyBuy=false
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=true
        this.Changeinfo=false
        this.appointment=false
        this.record=false

        
      }
      else if(key==6){
        this.MyBuy=false
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=true
        this.appointment=false
        this.record=false
      }
      else if(key==7){
        this.MyBuy=false
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=true
        this.record=false
      }
      else if(key==8){
        this.MyBuy=false
        this.MySale=false
        this.MyCollect=false
        this.MyAttention=false
        this.PersonalData=false
        this.Changeinfo=false
        this.appointment=false
        this.record=true
      }
    },
    myprofile(){//查看我的资料
      this.$axios({
          url:'api/myprofile/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          this.profile=data.data.data
          console.log(this.profile,882);
      }).catch(err=>{
          console.log(err)
      })
    },
    afterRead(file) {//更改头像
      console.log(file);
      let formData = new FormData();
      formData.append("file", file.file);
      this.$axios({
          url: 'api/common/uploadfile',
          method: 'POST',
          data: formData,
      }).then(resp => {
          console.log(resp.data);
          this.$axios({
              url:'api/ChangePhoto/get',     //rul
              methods:'get',   //type
              params:{
                acc:this.userTel,
                photo:resp.data.data
              }
          }).then(data=>{
              console.log(data);
              this.myprofile()
          }).catch(err=>{
              console.log(err)
          })
      }).catch((err) => {
          console.log(err);
      })
    },
    ChangeName(){//修改昵称
      this.showName=true
    },
    confirmName(){//确认昵称
      this.$axios({
          url:'api/ChangeName/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel,
            userName:this.userName
          }
      }).then(data=>{
          this.profile=data.data.data
          console.log(this.profile);
          this.myprofile()
      }).catch(err=>{
          console.log(err)
      })
    },
    ChangeLogPwd(){//修改登录密码
      this.showLogPwd=true
    },
    confirmLogPwd(){//确认登录密码
      if(this.userNewPwd!=this.userPwdTwo){
        this.$message({
          message: '两次输入密码不一致',
          type: 'warning'
        });
      }else{
        if(this.userPwd!=this.profile[0].userPwd){
          this.$message({
            message: '输入原密码错误',
            type: 'warning'
          });
        }else{
          this.$axios({
              url:'api/ChangePwd/get',     //rul
              methods:'get',   //type
              params:{
                acc:this.userTel,
                userNewPwd:this.userNewPwd
              }
          }).then(data=>{
              console.log(data);
              this.$message({
                message: data.data.msg,
                type: 'success'
              });
          }).catch(err=>{
              console.log(err)
          })
        }
      }
    },
    ChangePayPwd(){//修改支付密码
      this.showPayPwd=true
    },
    confirmPayPwd(){//确认支付密码
      if(this.newPayPwd!=this.twoPayPwd){
        this.$message({
          message: '两次输入密码不一致',
          type: 'warning'
        });
      }else{
        if(this.userPayPwd!=this.profile[0].paymentCode){
          this.$message({
            message: '输入原密码错误',
            type: 'warning'
          });
        }else{
          this.$axios({
              url:'api/ChangePayPwd/get',     //rul
              methods:'get',   //type
              params:{
                acc:this.userTel,
                newPayPwd:this.newPayPwd
              }
          }).then(data=>{
              console.log(data);
              this.$message({
                message: data.data.msg,
                type: 'success'
              });
          }).catch(err=>{
              console.log(err)
          })
        }
      }
    },
    viewAddress(){//查看地址
      this.$axios({
          url:'api/viewAddress/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,866);
          data.data.data.forEach(item1 => {
                      this.list.push({id:item1.addressId,name:item1.person,
                      tel:item1.personPhone,address:item1.province+item1.city+item1.district+item1.address,country:'中国',province:item1.province,city:item1.city,
                      county:item1.district,street:item1.address,areaCode:item1.info})
                  });
          data.data.data.forEach(item => {
                      this.MyAddress.push({consignee:item.person,region:item.province+item.city+item.district,address:item.address,postcode:"000000",phone:item.personPhone})
                  });
      }).catch(err=>{
          console.log(err)
      })
    },
    address(){//新增地址
      this.showAddress=true
    },
    onSave(a){//确认新增地址
      console.log(a);
      this.$axios({
          url:'api/NewAddress/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel,
            name:a.name,//名字
            province:a.province,//省
            city:a.city,//市
            county:a.county,//区
            addressDetail:a.addressDetail,//详细地址
            areaCode:a.areaCode,//地址代号
            phone:a.tel//收货人电话
          }
      }).then(data=>{
          console.log(data);
          this.showAddress=false
          this.$message({
                message: data.data.msg,
                type: 'success'
              });
          this.list=[]
          this.viewAddress()
      }).catch(err=>{
          console.log(err)
      })
    },
    onEdit(item, index) {//修改地址
                console.log(item,index);
                this.amendAddress=true
                this.echo=item
                this.updateaddId=item.id
            },
    updateadd(a){//确认修改地址
      console.log(a);
      this.$axios({
          url:'api/confirmAddress/get',     //rul
          methods:'get',   //type
          params:{
            updateaddId:this.updateaddId,
            name:a.name,//名字
            province:a.province,//省
            city:a.city,//市
            county:a.county,//区
            addressDetail:a.addressDetail,//详细地址
            areaCode:a.areaCode,//地址代号
            phone:a.tel//收货人电话
          }
      }).then(data=>{
          console.log(data);
          this.amendAddress=false
          this.$message({
                message: data.data.msg,
                type: 'success'
              });
          this.list=[]
          this.viewAddress()
      }).catch(err=>{
          console.log(err)
      })
    },
    onDelete(){//删除地址
      this.$axios({
          url:'api/onDelete/get',     //rul
          methods:'get',   //type
          params:{
            updateaddId:this.updateaddId,
          }
      }).then(data=>{
          console.log(data);
          this.amendAddress=false
          this.$message({
                message: data.data.msg,
                type: 'success'
              });
          this.list=[]
          this.viewAddress()
      }).catch(err=>{
          console.log(err)
      })
    },
    selectOthersData(attention){//跳转他人信息页面
      localStorage.setItem('attention', attention)
      this.$router.push('OthersData')
    },
    selectCollect(){//查看收藏商品
      this.$axios({
            url:'api/MyCollect/get',     //rul
            methods:'get',   //type
            params:{
              acc:this.userTel
            }
        }).then(data=>{
            console.log(data,971);
            this.collect=data.data.data.filter(item=>item!=null)
        }).catch(err=>{
            console.log(err)
        })
    },
    cancelCollect(collectionId){//取消收藏
      this.$axios({
          url:'api/cancelCollect/get',     //rul
          methods:'get',   //type
          params:{
            collectionId:collectionId,
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data);
          this.selectCollect()
      }).catch(err=>{
          console.log(err)
      })
    },
    selectAttention(){//查看关注
      this.$axios({
            url:'api/Attention/get1',     //rul
            methods:'get',   //type
            params:{
              acc:this.userTel
            }
        }).then(data=>{
            console.log(data,1104);
            this.Attention=data.data.data.filter(item=>item!=null)
        }).catch(err=>{
            console.log(err)
        })
    },
    unfollow(attentionId){//取消关注
      this.$axios({
          url:'api/unfollow/get',     //rul
          methods:'get',   //type
          params:{
            attentionId:attentionId
          }
      }).then(data=>{
          console.log(data);
          this.selectAttention()
      }).catch(err=>{
          console.log(err)
      })
    },
    selectMyGoods(){//查看我在卖商品
      this.$axios({
          url:'api/selectMyGoods/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,1069);
          this.MyGoods=data.data.data.filter(item=>item!=null)
      }).catch(err=>{
          console.log(err)
      })
    },
    unShelve(commodityId){//下架商品
      this.$axios({
          url:'api/unShelve/get',     //rul
          methods:'get',   //type
          params:{
            commodityId:commodityId
          }
      }).then(data=>{
          console.log(data,1083);
          this.selectMyGoods()
      }).catch(err=>{
          console.log(err)
      })
    },
    attentionAmount(){//查看关注数量
      this.$axios({
          url:'api/attentionAmount/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,1098);
          this.attentionNumber=data.data.data[0].number
      }).catch(err=>{
          console.log(err)
      })
    },
    fansAmount(){//查看粉丝数量
      this.$axios({
          url:'api/fansAmount/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,1113);
          this.fansNumber=data.data.data[0].number
      }).catch(err=>{
          console.log(err)
      })
    },
    auctionSubscribe(){//查看我的拍卖预约
      this.$axios({
          url:'api/auctionSubscribe/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,1128);
          this.auction=data.data.data.filter(item=>item!=null)
      }).catch(err=>{
          console.log(err)
      })
    },
    cancelBooking(auctionId){//取消预约
      this.$axios.post('api/updateappointment',
          this.$qs.stringify({
            auctionId:auctionId,
            userTel:this.userTel,
          }))
          .then(resp => {
            console.log(resp)
            this.auctionSubscribe()
          }).catch(err => {
            console.log(err)
          })
      },
    BrowseHistory(){//查看浏览记录
      this.$axios({
          url:'api/BrowseHistory/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,1155);
          this.cookies=data.data.data.filter(item=>item!=null)
      }).catch(err=>{
          console.log(err)
      })
    },
    delBrowseHistory(browseId){//删除浏览记录
      this.$axios({
          url:'api/delBrowseHistory/get',     //rul
          methods:'get',   //type
          params:{
            browseId:browseId
          }
      }).then(data=>{
          console.log(data,1169);
          this.BrowseHistory()
      }).catch(err=>{
          console.log(err)
      })
    },
    Certification(){//实名认证
      this.showCertification=true
    },
    frontPhoto(file){//上传身份证正面照片
      let formData = new FormData();
      formData.append("file", file.file);
      this.$axios({
          url: 'api/common/uploadfile',
          method: 'POST',
          data: formData,
      }).then(resp => {
          // console.log(resp.data);
          // this.$axios({
          //     url:'api/frontPhoto/get',     //rul
          //     methods:'get',   //type
          //     params:{
          //       acc:this.userTel,
          //       photo:resp.data.data
          //     }
          // }).then(data=>{
          //     console.log(data,1214)
          //     this.$message({
          //       message: data.data.msg,
          //       type: 'success'
          //     });
          // }).catch(err=>{
          //     console.log(err)
          // })
          this.frontImg=resp.data.data
          this.$message({
                message: "上传成功",
                type: 'success'
              });
      }).catch((err) => {
          console.log(err);
      })
    },
    versoPhoto(file){//上传身份证背面照片
      let formData = new FormData();
      formData.append("file", file.file);
      this.$axios({
          url: 'api/common/uploadfile',
          method: 'POST',
          data: formData,
      }).then(resp => {
          // console.log(resp.data);
          // this.$axios({
          //     url:'api/versoPhoto/get',     //rul
          //     methods:'get',   //type
          //     params:{
          //       acc:this.userTel,
          //       photo:resp.data.data
          //     }
          // }).then(data=>{
          //     console.log(data,1239)
          //     this.$message({
          //       message: data.data.msg,
          //       type: 'success'
          //     });
          // }).catch(err=>{
          //     console.log(err)
          // })
          this.versoImg=resp.data.data
          this.$message({
                message: "上传成功",
                type: 'success'
              });
      }).catch((err) => {
          console.log(err);
      })
    },
    confirmCertification(){//确认实名认证
    console.log(this.frontImg,this.versoImg,5555);
      this.$axios({
              url:'api/confirmCertification/get',     //rul
              methods:'get',   //type
              params:{
                identityCardNumber:this.IDcardNo,
                identityCardName:this.IDcardName,
                acc:this.userTel,
                frontImg:this.frontImg,
                versoImg:this.versoImg
              }
          }).then(data=>{
              console.log(data,1265)
              this.$message({
                message: data.data.msg,
                type: 'success'
              });
              this.selectCertification()
          }).catch(err=>{
              console.log(err)
          })
    },
    selectCertification(){//查看是否实名
      this.$axios({
              url:'api/selectCertification/get',     //rul
              methods:'get',   //type
              params:{
                acc:this.userTel
              }
          }).then(data=>{
              console.log(data,1284)
              if(data.data.isNo=="已实名"){
                this.isNoCertification=1
              }else{
                this.isNoCertification=0
              }
          }).catch(err=>{
              console.log(err)
          })
    },
    appraise(){//正常订单评价
      this.showAppraise=true
    },
    confirmAppraise(i){//正常订单确定评价
      if(this.checked==false){
            this.cryptonym=1
        }
      this.$axios({
              url:'api/confirmAppraise/get',     //rul
              methods:'get',   //type
              params:{
                userTel:this.userTel,
                orderId:i.orderId,
                sellerTel:i.sellerTel,
                commentsToSeller:this.content,
                scoreToSeller:this.value,
                commodityId:i.commodityId,
                anonymous:this.cryptonym,
                commentImg:this.commentPhoto
              }
          }).then(data=>{
              console.log(data,1356)
              this.$message({
                message: "评价成功",
                type: 'success'
              });
              this.$axios({
                  url:'api/changeStatus/get',     //rul
                  methods:'get',   //type
                  params:{
                    orderId:i.orderId,
                  }
              }).then(data=>{
                  console.log(data,1368)
                  this.selectOrder()
              }).catch(err=>{
                  console.log(err)
              })
          }).catch(err=>{
              console.log(err)
          })

    },
    commentImg(file){//插入正常订单评论图片
      let formData = new FormData();
      formData.append("file", file.file);
      this.$axios({
          url: 'api/common/uploadfile',
          method: 'POST',
          data: formData,
      }).then(resp => {
          this.commentPhoto=resp.data.data
          this.$message({
                message: "上传成功",
                type: 'success'
              });
      }).catch((err) => {
          console.log(err);
      })
    },
    selectOrder(){//查看正常买入订单
      console.log(65555);
      this.$axios({
            url:'api/selectOrder/get',     //rul
            methods:'get',   //type
            params:{
              acc:this.userTel
            }
        }).then(data=>{
            this.order=data.data.data.filter(item=>item!=null)
            console.log(this.order,1463);
        }).catch(err=>{
          console.log(2234);
            console.log(err)
        })
    },
    auctionAppraise(){//拍卖订单评价
      this.showAuctionAppraise=true
    },
    confirmAuctionAppraise(i){//拍卖订单确定评价
      if(this.isNoCryptonym==false){
            this.CryptonymNumber=1
        }
      this.$axios({
              url:'api/confirmAuctionAppraise/get',     //rul
              methods:'get',   //type
              params:{
                userTel:this.userTel,
                auctionKnockdownId:i.auctionKnockdownId,
                sellerTel:i.sellerTel,
                commentsToSeller:this.auctionContent,
                scoreToSeller:this.grade,
                commodityId:i.commodityId,
                anonymous:this.CryptonymNumber,
                commentImg:this.auctionPhoto
              }
          }).then(data=>{
              console.log(data,1456)
              this.$message({
                message: "评价成功",
                type: 'success'
              });
              this.$axios({
                  url:'api/changeAuctionStatus/get',     //rul
                  methods:'get',   //type
                  params:{
                    auctionKnockdownId:i.auctionKnockdownId,
                  }
              }).then(data=>{
                  console.log(data,1468)
                  this.selectAuctionOrder()
              }).catch(err=>{
                  console.log(err)
              })
          }).catch(err=>{
              console.log(err)
          })
    },
    auctionImg(file){//插入拍卖订单评论图片
      let formData = new FormData();
      formData.append("file", file.file);
      this.$axios({
          url: 'api/common/uploadfile',
          method: 'POST',
          data: formData,
      }).then(resp => {
          this.auctionPhoto=resp.data.data
          this.$message({
                message: "上传成功",
                type: 'success'
              });
      }).catch((err) => {
          console.log(err);
      })
    },
    selectAuctionOrder(){//查看拍卖购买订单
      this.$axios({
            url:'api/auctionOrder/get',     //rul
            methods:'get',   //type
            params:{
              acc:this.userTel
            }
        }).then(data=>{
            
            this.auctionOrder=data.data.data.filter(item=>item!=null)
            console.log(this.auctionOrder,999);
        }).catch(err=>{
            console.log(err)
        })
    },
    UploadLogistics(){//上传正常订单物流
      this.showLogistics=true
      console.log(this.showLogistics);
    },
    confirmUploadLogistics(i){//确认上传正常订单物流
      this.$axios({
            url:'api/confirmUploadLogistics/get',     //rul
            methods:'get',   //type
            params:{
              orderId:i.orderId,
              expressNumber:this.trackingNumber
            }
        }).then(data=>{
            console.log(data,1529);
            this.$message({
                message:data.data.msg,
                type: 'success'
              });
        }).catch(err=>{
            console.log(err)
        })
    },
    UploadAuctionLogistics(){//上传拍卖订单物流
      this.showAuctionLogistics=true
    },
    DetermineTheUpload(i){//确定上传拍卖订单物流
      this.$axios({
            url:'api/DetermineTheUpload/get',     //rul
            methods:'get',   //type
            params:{
              auctionKnockdownId:i.auctionKnockdownId,
              expressNumber:this.auctionTrackingNumber
            }
        }).then(data=>{
            console.log(data,1529);
            this.$message({
                message:data.data.msg,
                type: 'success'
              });
        }).catch(err=>{
            console.log(err)
        })
    },
    LogisticsInfo(){//查看正常订单物流
      this.showLogisticsInfo=true
    },
    selectLogisticsInfo(){//查看拍卖订单物流
      this.auctionLogisticsInfo=true
    },
    chat(userTel){//跳转聊天
      this.$router.push({
        path:`/UserChat/${userTel}`
      })
    },
    payment(id,type){//去支付
      localStorage.setItem('orderId', JSON.stringify({id:id,type:type}))
      console.log(localStorage.getItem('orderId'),1598);
      this.$router.push('paying')
    },
    goods(commodityId,userTel){//收藏跳转详情
      localStorage.setItem('hx220408commodityId', commodityId)
      localStorage.setItem('hx220408userTel', userTel)
      this.$router.push('goods')
    },
    exit(){//退出登录
      sessionStorage.removeItem('userTel')
      this.$router.push('/')
    },
    home(){//跳转首页
      this.$router.push('/')
    },
    ContactUs(){//联系客服
      this.$router.push('CustomerChat')
    },
    activity(){//跳转活动页面
      this.$router.push('ActivityPage')
    },
    publish(){//跳转发布页面
      this.$router.push('ReleaseView')
    },
    Registration(){//跳转活动报名页面
      this.$router.push('HuodongPage')
    },
    AuctionPage(){//跳转拍卖首页
      this.$router.push('AuctionHomepage')
    },
    ComplainSeller(commodityId,sellerTel){//投诉卖家
      localStorage.setItem('BeComplainedGoods', commodityId)
      localStorage.setItem('BeComplainedPeople', sellerTel)
      this.$router.push('ComplaintView')
    }
  },

  mounted(){
    this.myprofile()
    this.viewAddress()
    this.selectOrder()

    //查看卖出订单
    this.$axios({
          url:'api/SaleOrder/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          
          this.SaleOrder=data.data.data.filter(item=>item!=null)
          console.log(this.SaleOrder,956);
      }).catch(err=>{
          console.log(err)
      })
      
    this.selectCollect()
    this.selectAuctionOrder()
    

    //查看拍卖卖出订单
    this.$axios({
          url:'api/auctionSoldOrder/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          this.auctionSoldOrder=data.data.data.filter(item=>item!=null)
          console.log(this.auctionSoldOrder,1053);
      }).catch(err=>{
          console.log(err)
      })
    this.selectAttention()
    this.selectMyGoods()
    this.attentionAmount()
    this.fansAmount()
    this.auctionSubscribe()
    this.BrowseHistory()
    this.selectCertification()
    
    //查看我的评价
    this.$axios({
          url:'api/selectEvaluate/get',     //rul
          methods:'get',   //type
          params:{
            acc:this.userTel
          }
      }).then(data=>{
          console.log(data,1563);
          this.MyEvaluate=data.data.data.filter(item=>item!=null)
      }).catch(err=>{
          console.log(err)
      })

    
  },
  created(){
    document.title = '个人中心'
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

.nav {
  width: 1290px;
  height: 35px;
  /* border: 1px solid red; */
  background-color: #f5f5f5;
  box-shadow: 0px 0px 2px #2999;
  color: #756c6c;
  font-size: 10px;
  cursor: pointer;
  margin: 0 auto;
}

.navul li:hover {
  color: #ff4400;
}

.navul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
  /* text-align: center; */
}

.navultow li {
  position: relative;
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
}

.hen {
  width: 1px;
  height: 10px;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;
  top: 11px;
  right: 24px;
  transform: rotate(20deg);
}

.second {
  width: 100px;
  height: 70px;
  box-shadow: 0px 0px 2px #2999;
  display: none;
}

.mycb1:hover .second {
  /* color:#FF4400; */
  display: block;
}

.myxb:hover {
  text-decoration: underline;
  color: #ff4400;
}

.second1:hover {
  color: #ff4400;
  text-decoration: underline;
}
.searchBar {
  margin-top: 30px;
  height: 100px;
  width: 100%;
  background-color: rgb(246, 237, 108);
  display: flex;
}
.searchLogo {
  margin-left: 5%;
  width: 100px;
  height: 100px;
}
.searchLogo img {
  width: 100px;
  height: 100px;
}
.Myxianbei {
  height: 100px;
  width: 50%;
  font-size: 50px;
  color: white;
  text-align: center;
  font-weight: bold;
  line-height: 100px;
  font-family: arial, "times new roman", "隶书", "微软雅黑";
}
.search {
  width: 30%;
  margin-right: 5%;
  margin-top: 30px;
  display: flex;
}
.search input {
  border: none;
  height: 30px;
  width: 300px;
}
.search button {
  border: none;
  height: 30px;
  width: 50px;
}
.below{
  display: flex;
  margin-top: 30px;
}
.navigation {
  width: 20%;
  margin-left: 10%;
}
.rightContent{
  margin-left: -10%;
  width: 70%;
}
.rightTop {
  display: flex;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgb(228, 228, 228);
}
.orderNumber{
  display: flex;
  height: 50px;
  /* line-height: 50px; */
  text-align: center;
  background-color: rgb(228, 228, 228);
}
.details{
  margin-top: 20px;
  display: flex;
  text-align: center;
}

.el-submenu .el-menu-item {
    min-width: 0 !important;
}
.ContactSeller{
  height: 25px;
  margin-top: 10px;
  background-color: rgb(198, 212, 235);
  border: 1px solid rgb(151, 151, 245);
  border-radius: 8px;
}
.DeleteOrder{
  height: 30px;
  margin-top: 10px;
  background-color: rgb(178, 199, 236);
  border: 1px solid rgb(151, 151, 245);
  border-radius: 8px;
}
.CollectName{
  width: 150px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; 
}
.CollectMoney{
  color: #ff4400;
}
.CollectPrice{
  font-size: 10px;
  color: darkgrey;
  margin-left: 20px;
  text-decoration: line-through;
}
.cancel{
  display: none;
  position: absolute;
  bottom: 45px;
  width: 150px;
  background-color: #756c6c;
  text-align: center;
  color: white;
}
.cancel:hover{
  display: block;
}
.Collectimg{
  width:150px;
  height:150px
}
.Collectimg:hover~p{
  display: block;
}
.information{
  display: flex;
  width: 420px;
  margin: 10px auto;
}
.attention{
  display: flex;
  width: 320px;
  margin: 0 auto;
}
.address{
border: 1px solid rgb(178, 199, 236);
text-align: center;
line-height: 35px;
}
.van-address-list__add {
    display: none !important;
}
.van-radio__icon--round .van-icon {
    display: none;
}
/* .van-address-item .van-radio__label {
    display: flex !important;
} */
/* .van-address-item__address {
    font-size: 15px !important;
    line-height: 20px !important;
    margin-left: 50px !important;
} */
.van-address-item__name {
    width: 200px !important;
}
.van-radio {
    width: 600px !important;
    margin: 0 auto !important;
}
.van-address-item {
    padding: 0px !important;
}
/deep/ .van-radio__label {
    margin-left: 12px;
    display: flex;
}
/* /deep/ .van-icon-success:before {
    display:none;
} */
/deep/ .van-radio__icon--round .van-icon {
    display:none;
}
 .van-address-item__address {
    font-size: 15px !important;
    line-height: 20px !important;
    margin-left: 50px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>